<template>
  <div class="page-operation">
    <el-button type="primary" @click="$router.push('/article/insert')">Insert Article</el-button>
  </div>
  <div class="page-filter">
    <el-form inline :disabled="isLoadingCategoryList" @submit.prevent="handleSearch">
      <el-form-item label="Category">
        <el-select v-model="articleListParams.pid">
          <el-option value label="All"></el-option>
          <el-option
            v-for="item in categoryList"
            :key="item.id"
            :value="item.id"
            :label="item.title"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Title">
        <el-input v-model="articleListParams.title"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">Search</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="page-container" v-loading="isLoadingArticleList">
    <el-table border :data="articleList">
      <el-table-column label="ID" prop="id" width="100"></el-table-column>
      <el-table-column label="Image" width="120">
        <template #default="{ row }">
          <ImageManager readonly v-model="row.image_input" width="30px" height="30px" />
        </template>
      </el-table-column>
      <el-table-column label="Category" prop="title"></el-table-column>
      <el-table-column label="Title" prop="title"></el-table-column>
      <el-table-column label="Summary" prop="synopsis"></el-table-column>
      <el-table-column label="Author" prop="author"></el-table-column>
      <el-table-column label="Time" prop="add_time">
        <template
          #default="{ row }"
        >{{ new Date(row.add_time * 1000).toLocaleString("zh-CN", { hour12: false }) }}</template>
      </el-table-column>
      <el-table-column label="Action" fixed="right" width="240">
        <template #default="{ row }">
          <el-link type="primary" @click="$router.push('/article/insert?id=' + row.id)">Edit</el-link>
          <el-divider direction="vertical"></el-divider>
          <el-link
            type="primary"
            @click="handleUnbindProduct(row)"
            v-if="row.storeInfo"
          >Unbind Product</el-link>
          <el-link type="primary" @click="openProductList(row)" v-else>Bind Product</el-link>
          <el-divider direction="vertical"></el-divider>
          <el-link
            type="danger"
            @click="handleDeleteProduct(row)"
          >{{ row.is_del ? 'Restore' : 'Delete' }}</el-link>
        </template>
      </el-table-column>
    </el-table>

    <Pagination
      v-model:index="articleListParams.page"
      v-model:size="articleListParams.limit"
      :total="articleCount"
      :on-change="handleGetCategoryList"
    />

    <el-dialog title="Bind Product" v-model="bindArticleVisible">
      <el-select v-model="productID" style="width: 100%">
        <el-option
          v-for="item in productList"
          :key="item.id"
          :value="item.id"
          :label="item.store_name"
        ></el-option>
      </el-select>
      <template #footer>
        <el-button :disabled="productID === null" @click="handleBindProduct" type="primary">Bind</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

import { bindProduct, delArticle, deleteArticleCategory, getArticleList, setArticleCategoryStatus, unbindProduct } from '@/api/article'

import Pagination from '@/components/pagination/index.vue'
import router from '@/router/'
import { ElMessage } from 'element-plus'
import {
  handleGetCategoryList,
  isLoadingCategoryList,
  categoryList,
} from '@/pages/article/category/index'
import ImageManager from '@/components/image-manager/index.vue'

import {
  productListParams,
  handleGetProductList,
  productList,
} from '@/pages/product/list/index'

// 1. get category list
handleGetCategoryList({ type: 1 })

const articleListParams = ref<ArticleListParamsType>({
  pid: '',
  title: '',
  page: 1,
  limit: 10,
})

const isLoadingArticleList = ref(false)

const articleList = ref<any[]>([])
const articleCount = ref(0)

function handleGetArticleList() {
  isLoadingArticleList.value = true
  getArticleList(articleListParams.value).then(res => {
    articleList.value = res.list
    articleCount.value = res.count
  }).finally(() => {
    isLoadingArticleList.value = false
  })
}

function handleSearch() {
  articleListParams.value.page = 1
  handleGetArticleList()
}

handleSearch()

// 8. delete category
function handleDeleteProduct(article: ArticleInfoType) {
  const { id } = article
  id && delArticle(id).then(() => {
    handleSearch()
    ElMessage.success('Delete Success')
  })
}

// 9. bind product
productListParams.value.limit = 0

const bindArticleVisible = ref(false)
const articleID = ref<number | null>(null)
const productID = ref<number | null>(null)

function openProductList(article: ArticleCategoryInfoType) {
  articleID.value = article.id
  bindArticleVisible.value = true
  handleGetProductList()
}

function handleBindProduct() {
  bindProduct(articleID.value as number, {
    product_id: productID.value as number,
  }).then(() => {
    bindArticleVisible.value = false
    productID.value = null
    handleSearch()
  })
}


function handleUnbindProduct(article: ArticleCategoryInfoType) {
  unbindProduct(article.id).then(() => {
    handleSearch()
  })
}
</script>
